<template>
	<div>
		<Banner :propsbanner = 'bannerList'></Banner>
		<Icons></Icons>
		<Tabs></Tabs>
		<Scroll></Scroll>
		<Spike></Spike>
		<Advert :propsadvert = 'advertList'></Advert>
		<Category :propsbanner = 'cattab1List'></Category>
		<Last></Last>
		<Travel></Travel>
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script>
	//引入Banner组件
	import Banner from './pages/Banner'
	import Icons from './pages/Icons'
	import Tabs from './pages/Tabs'
	import Scroll from './pages/Scroll'
	import Spike from './pages/Spike'
	import Advert from './pages/Advert'
	import Category from './pages/Category'
	import Last from './pages/Last'
	import Travel from './pages/Travel'
	import BottomNav from '../default/BottomNav'
	
	//导出组件
	export default{
		name:'Home',
		//组件列表的调用
		components:{
			Banner,
			Icons,
			Tabs,
			Scroll,
			Spike,
			Advert,
			Category,
			Last,
			Travel,
			BottomNav
		},
		data(){
			return{
				arrUrl:[require("@/assets/img/weibu1-1.png"),require("@/assets/img/weibu2-1.png"),require("@/assets/img/weibu3-2.png")],
				bannerList:[],
				advertList:[],
				cattab1List:[]
			}
		},
		//create：当前数组创建之后【el挂载之前(标签未渲染),data函数已经完成了初始化】
		//父组件需要将请求的数据给到子组件的话，满足：1.data函已初始化；2.响应数据传给子组件(组件已渲染)
		//mounted：组件挂载之后【如果接口复杂/多个接口的时候，优秀考虑mounted】
		// create:当前组件创建之后【el挂载之前(标签未渲染)，data函数已经完成了初始化】
			// 父组件需要将请求的数据给到子组件的话，满足：1.data函数已初始化；2.响应数据传给子组件(组件已渲染)
			// mounted:组件挂载之后【如果接口复杂/多个接口的时候，优先考虑mounted】
			created(){
				// 备份[避免堵塞]
				let that = this;
				// 向dataHome.json文件发起异步请求
				// 当前是本地请求，需要考虑项目的路径【实际开发时请求来源第三方】
				this.axios.get('http://localhost:8080/api/dataHome.json').then( (res)=>{
					
					let data = res.data.Homemsg[0];
					console.log(res.data.Homemsg[0])
					// 提取banner组件的数据
					that.bannerList = data.BannerVueList;
					// 提取spike组件的数据
					that.SpikeList = data.SpikeVueList;
					console.log(that.SpikeList.spike_List);
				
				}).catch( (error)=>{
					console.log( error );
				});
			}
		}
</script>

<style>
</style>
